/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  AsyncStorage, Platform
} from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';

import TabBarItem from './components/TabBarItem'

import Home from './pages/Home';
import Todo from './pages/Todo';
import Message from './pages/Message';
import Mine from './pages/Mine';

import Login from './pages/Login';
import NoticesList from './pages/Notices/NoticesList';
import PreSafetyCheck from './pages/SafetyCheck/PreSafetyCheck';
import RectifyAndReply from './pages/SafetyCheck/RectifyAndReply';
import PhoneBook from './pages/PhoneBook/PhoneBook';
import QRScanner from './pages/QRScanner/QRScanner';

const BottomTabMenu = TabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '首页',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={{ uri: 'icon_tabbar_homepage' }}
            selectedImage={{ uri: 'icon_tabbar_homepage_selected' }}
          />
        )
      }),
    },
    Todo: {
      screen: Todo,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '待办事项',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={{ uri: 'icon_tabbar_merchant_normal' }}
            selectedImage={{ uri: 'icon_tabbar_merchant_selected' }}
          />
        )
      }),
    },
    // SafetyCheck: {
    //   screen: SafetyCheck,
    //   navigationOptions: ({ navigation }) => {
    //     return ({
    //       tabBarLabel: '安全检查',
    //       tabBarIcon: ({ focused, tintColor }) => (
    //         <TabBarItem
    //           tintColor={tintColor}
    //           focused={focused}
    //           normalImage={{ uri: 'icon_tabbar_merchant_normal' }}
    //           selectedImage={{ uri: 'icon_tabbar_merchant_selected' }}
    //         />
    //       )
    //     })
    //   },
    // },
    Message: {
      screen: Message,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '消息',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={{ uri: 'icon_tabbar_merchant_normal' }}
            selectedImage={{ uri: 'icon_tabbar_merchant_selected' }}
          />
        )
      }),
    },
    Mine: {
      screen: Mine,

      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '我的',

        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={{ uri: 'icon_tabbar_misc' }}
            selectedImage={{ uri: 'icon_tabbar_misc_selected' }}
          />
        )
      }),
    },

  },
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    pressColor: '#0366d7',
    tabBarOptions: {
      activeTintColor: '#0366d7',
      inactiveTintColor: '#979797',
      style: { backgroundColor: '#ffffff' },
    },
  }
);

const levelTwoRouteConfig = {
  NoticesList: {
    path: 'NoticesList',
    screen: NoticesList
  },PreSafetyCheck: {
    path: 'PreSafetyCheck',
    screen: PreSafetyCheck
  }
  ,PhoneBook: {
    path: 'PhoneBook',
    screen: PhoneBook
  } ,RectifyAndReply: {
    path: 'RectifyAndReply',
    screen: RectifyAndReply
  },QRScanner: {
    path: 'QRScanner',
    screen: QRScanner
  }
};
const NavigatorConfig = StackNavigator(
  {
    Tab: {
      screen: BottomTabMenu
    },
    ...levelTwoRouteConfig
  },
  {
    navigationOptions: {
      // headerStyle: { backgroundColor: color.theme }
      headerBackTitle: null,
      headerTintColor: '#333333',
      ...Platform.select({
        ios: {
          headerStyle: { backgroundColor: 'white', justifyContent: 'center', height: 50 }
        }, android: {
          headerStyle: { backgroundColor: '#0366d7', justifyContent: 'center', height: 40, },
          headerTitleStyle: { color: 'white', textAlign: 'center', width: '100%' }
        }
      }),
      showIcon: true,
    },
  }
);

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      user: null,

    };
  }

  _asyncGetAppStatus() {
    AsyncStorage.getItem('user')
      .then(
        (data) => {
          let user;
          let newState = {};
          if (data) {
            user = JSON.parse(data);
          }

          if (user && user.accessToken) {
            newState.logined = true;
            newState.user = user;
          } else {
            newState.logined = false;
          }

          this.setState(newState);
        }
      )
      .catch((err) => {
        alert(err);
      });
  }

  componentDidMount() {
    this._asyncGetAppStatus();
  }

  _afterLogin = (user) => {
    //user是一个用户信息的对象
    let user2 = JSON.stringify(user);
    AsyncStorage.setItem('user', user2)
      .then(
        () => {
          this.setState({
              isLogin: true,
              user: user
            }
          );
        }
      )
      .catch((err) => {
        alert(err);
      });


  };

  _logout = () => {

    AsyncStorage.removeItem('user');

    this.setState({
      isLogin: false,
      user: null
    }, () => {
      alert('退出成功啦！');
    });

  };

  render() {
    // if (!this.state.isLogin) {
    //   return <Login afterLogin={this._afterLogin}/>
    // }

    return (
      <NavigatorConfig/>
    );
  }

}

